<template>
  <div class="push-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <el-icon><Promotion /></el-icon>
          消息推送
        </h2>
        <p class="page-subtitle">向指定用户或群组发送消息通知</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="sendMessage" :loading="sending">
          <el-icon><Promotion /></el-icon>
          发送消息
        </el-button>
        <el-button @click="resetForm">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </div>
    </div>

    <!-- 发送统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card total-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Promotion /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ pushStats.total }}</div>
              <div class="stat-label">总发送数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card success-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ pushStats.success }}</div>
              <div class="stat-label">发送成功</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card failed-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Close /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ pushStats.failed }}</div>
              <div class="stat-label">发送失败</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card today-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ pushStats.today }}</div>
              <div class="stat-label">今日发送</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 消息发送表单 -->
    <el-card class="push-form-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>消息发送</span>
        </div>
      </template>

      <el-form
        ref="pushFormRef"
        :model="pushForm"
        :rules="pushRules"
        label-width="120px"
        class="push-form"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="消息标题" prop="title">
              <el-input
                v-model="pushForm.title"
                placeholder="请输入消息标题"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消息类型" prop="type">
              <el-select v-model="pushForm.type" placeholder="选择消息类型" style="width: 100%">
                <el-option label="系统通知" value="system" />
                <el-option label="工作通知" value="work" />
                <el-option label="个人消息" value="personal" />
                <el-option label="公告消息" value="announcement" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="使用模板">
              <el-select
                v-model="selectedTemplate"
                placeholder="选择消息模板（可选）"
                style="width: 100%"
                clearable
                @change="applyTemplate"
              >
                <el-option
                  v-for="template in templateList"
                  :key="template.id"
                  :label="template.name"
                  :value="template.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="pushForm.priority" placeholder="选择优先级" style="width: 100%">
                <el-option label="普通" value="normal" />
                <el-option label="重要" value="important" />
                <el-option label="紧急" value="urgent" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="消息内容" prop="content">
          <el-input
            v-model="pushForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入消息内容，可使用变量：{{userName}}、{{date}}、{{time}}等"
          />
        </el-form-item>

        <el-form-item label="接收者" prop="receivers">
          <div class="receiver-section">
            <div class="receiver-tabs">
              <el-tabs v-model="receiverTab" @tab-click="handleReceiverTabClick">
                <el-tab-pane label="选择用户" name="users">
                  <div class="user-selection">
                    <div class="selection-header">
                      <el-input
                        v-model="userSearchKeyword"
                        placeholder="搜索用户"
                        style="width: 200px"
                        clearable
                      >
                        <template #prefix>
                          <el-icon><Search /></el-icon>
                        </template>
                      </el-input>
                      <el-button type="primary" @click="selectAllUsers">
                        <el-icon><Check /></el-icon>
                        全选
                      </el-button>
                      <el-button @click="clearAllUsers">
                        <el-icon><Close /></el-icon>
                        清空
                      </el-button>
                    </div>
                    <div class="user-list">
                      <el-checkbox-group v-model="selectedUsers">
                        <el-checkbox
                          v-for="user in filteredUsers"
                          :key="user.id"
                          :label="user.id"
                          class="user-checkbox"
                        >
                          <div class="user-info">
                            <el-avatar :size="24" :src="user.avatar" />
                            <span class="user-name">{{ user.name }}</span>
                            <span class="user-dept">{{ user.department }}</span>
                          </div>
                        </el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="选择部门" name="departments">
                  <div class="department-selection">
                    <el-tree
                      ref="departmentTreeRef"
                      :data="departmentList"
                      show-checkbox
                      node-key="id"
                      :props="departmentProps"
                      @check="handleDepartmentCheck"
                    />
                  </div>
                </el-tab-pane>
                <el-tab-pane label="选择角色" name="roles">
                  <div class="role-selection">
                    <el-checkbox-group v-model="selectedRoles">
                      <el-checkbox
                        v-for="role in roleList"
                        :key="role.id"
                        :label="role.id"
                        class="role-checkbox"
                      >
                        <div class="role-info">
                          <span class="role-name">{{ role.name }}</span>
                          <span class="role-desc">{{ role.description }}</span>
                        </div>
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="selected-receivers">
              <div class="receivers-header">
                <span>已选择接收者 ({{ totalReceivers }})</span>
                <el-button type="danger" size="small" @click="clearAllReceivers">
                  <el-icon><Delete /></el-icon>
                  清空
                </el-button>
              </div>
              <div class="receivers-list">
                <el-tag
                  v-for="receiver in selectedReceivers"
                  :key="receiver.id"
                  closable
                  @close="removeReceiver(receiver)"
                  class="receiver-tag"
                >
                  {{ receiver.name }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="发送设置">
          <el-checkbox v-model="pushForm.urgent">紧急消息（弹窗提醒）</el-checkbox>
          <el-checkbox v-model="pushForm.requireRead">需要已读回执</el-checkbox>
          <el-checkbox v-model="pushForm.schedule">定时发送</el-checkbox>
        </el-form-item>

        <el-form-item v-if="pushForm.schedule" label="发送时间" prop="scheduleTime">
          <el-date-picker
            v-model="pushForm.scheduleTime"
            type="datetime"
            placeholder="选择发送时间"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="附件">
          <el-upload
            ref="uploadRef"
            :file-list="pushForm.attachments"
            :auto-upload="false"
            :on-change="handleFileChange"
            :on-remove="handleFileRemove"
            multiple
          >
            <el-button type="primary">
              <el-icon><Upload /></el-icon>
              选择文件
            </el-button>
            <template #tip>
              <div class="el-upload__tip">
                支持 jpg/png/pdf/doc/docx 文件，单个文件不超过 10MB
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 消息预览 -->
    <el-card class="preview-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>消息预览</span>
          <el-button type="primary" size="small" @click="refreshPreview">
            <el-icon><Refresh /></el-icon>
            刷新预览
          </el-button>
        </div>
      </template>

      <div class="message-preview">
        <div class="preview-header">
          <h3>{{ pushForm.title || '消息标题' }}</h3>
          <div class="preview-meta">
            <el-tag :type="getTypeTagType(pushForm.type)" size="small">
              {{ getTypeLabel(pushForm.type) }}
            </el-tag>
            <el-tag :type="getPriorityTagType(pushForm.priority)" size="small">
              {{ getPriorityLabel(pushForm.priority) }}
            </el-tag>
            <span class="preview-time">{{ currentTime }}</span>
          </div>
        </div>
        <div class="preview-content">
          <p>{{ getPreviewContent() }}</p>
        </div>
        <div v-if="pushForm.attachments.length > 0" class="preview-attachments">
          <h4>附件：</h4>
          <ul>
            <li v-for="file in pushForm.attachments" :key="file.uid">
              <el-icon><Document /></el-icon>
              {{ file.name }}
            </li>
          </ul>
        </div>
        <div class="preview-receivers">
          <h4>接收者：</h4>
          <div class="receivers-preview">
            <el-tag
              v-for="receiver in selectedReceivers.slice(0, 10)"
              :key="receiver.id"
              size="small"
              class="receiver-preview-tag"
            >
              {{ receiver.name }}
            </el-tag>
            <span v-if="selectedReceivers.length > 10" class="more-receivers">
              等 {{ selectedReceivers.length }} 人
            </span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 发送历史 -->
    <el-card class="history-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>发送历史</span>
          <el-button @click="refreshHistory">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </template>

      <el-table :data="pushHistory" style="width: 100%">
        <el-table-column prop="title" label="消息标题" min-width="200" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTagType(row.type)" size="small">
              {{ getTypeLabel(row.type) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="receivers" label="接收者" width="100">
          <template #default="{ row }">
            {{ row.receivers.length }} 人
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="row.status === 'success' ? 'success' : 'danger'" size="small">
              {{ row.status === 'success' ? '发送成功' : '发送失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" label="发送时间" width="180" />
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="resendMessage(row)">
              <el-icon><Promotion /></el-icon>
              重发
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  Promotion,
  Refresh,
  Check,
  Close,
  Calendar,
  Search,
  Delete,
  Upload,
  Document
} from '@element-plus/icons-vue'

// 响应式数据
const sending = ref(false)
const receiverTab = ref('users')
const userSearchKeyword = ref('')
const selectedUsers = ref<string[]>([])
const selectedRoles = ref<string[]>([])
const selectedTemplate = ref('')
const pushFormRef = ref<FormInstance>()
const departmentTreeRef = ref()
const uploadRef = ref()

// 推送统计数据
const pushStats = reactive({
  total: 0,
  success: 0,
  failed: 0,
  today: 0
})

// 推送表单
const pushForm = reactive({
  title: '',
  type: '',
  content: '',
  priority: 'normal',
  urgent: false,
  requireRead: false,
  schedule: false,
  scheduleTime: null,
  attachments: []
})

// 表单验证规则
const pushRules: FormRules = {
  title: [
    { required: true, message: '请输入消息标题', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择消息类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入消息内容', trigger: 'blur' },
    { min: 10, message: '内容至少 10 个字符', trigger: 'blur' }
  ],
  receivers: [
    { required: true, message: '请选择接收者', trigger: 'change' }
  ]
}

// 模板列表
const templateList = ref([
  {
    id: 'TPL001',
    name: '系统维护通知',
    content: '尊敬的用户，系统将于{{date}} {{time}}进行维护，预计维护时间2小时，期间可能影响正常使用，请提前做好准备。'
  },
  {
    id: 'TPL002',
    name: '工作安排通知',
    content: '各位同事，{{date}} {{time}}将召开{{department}}会议，请准时参加。会议地点：会议室A，会议主题：{{meetingTopic}}。'
  }
])

// 用户列表
const userList = ref([
  { id: 'U001', name: '张三', department: '技术部', avatar: '' },
  { id: 'U002', name: '李四', department: '产品部', avatar: '' },
  { id: 'U003', name: '王五', department: '设计部', avatar: '' },
  { id: 'U004', name: '赵六', department: '运营部', avatar: '' }
])

// 部门列表
const departmentList = ref([
  {
    id: 'D001',
    label: '技术部',
    children: [
      { id: 'D001-1', label: '前端组' },
      { id: 'D001-2', label: '后端组' },
      { id: 'D001-3', label: '测试组' }
    ]
  },
  {
    id: 'D002',
    label: '产品部',
    children: [
      { id: 'D002-1', label: '产品组' },
      { id: 'D002-2', label: '运营组' }
    ]
  }
])

// 角色列表
const roleList = ref([
  { id: 'R001', name: '管理员', description: '系统管理员' },
  { id: 'R002', name: '普通用户', description: '普通用户' },
  { id: 'R003', name: '部门经理', description: '部门经理' }
])

// 推送历史
const pushHistory = ref([
  {
    id: 'PUSH001',
    title: '系统维护通知',
    type: 'system',
    receivers: ['U001', 'U002', 'U003'],
    status: 'success',
    sendTime: '2024-12-01 10:30:00'
  },
  {
    id: 'PUSH002',
    title: '工作安排通知',
    type: 'work',
    receivers: ['U001', 'U002'],
    status: 'success',
    sendTime: '2024-12-01 09:15:00'
  }
])

// 部门树配置
const departmentProps = {
  children: 'children',
  label: 'label'
}

// 计算属性
const filteredUsers = computed(() => {
  if (!userSearchKeyword.value) return userList.value
  return userList.value.filter(user => 
    user.name.includes(userSearchKeyword.value) || 
    user.department.includes(userSearchKeyword.value)
  )
})

const selectedReceivers = computed(() => {
  const receivers = []
  
  // 添加选中的用户
  selectedUsers.value.forEach(userId => {
    const user = userList.value.find(u => u.id === userId)
    if (user) {
      receivers.push({ id: user.id, name: user.name, type: 'user' })
    }
  })
  
  // 添加选中的角色
  selectedRoles.value.forEach(roleId => {
    const role = roleList.value.find(r => r.id === roleId)
    if (role) {
      receivers.push({ id: role.id, name: role.name, type: 'role' })
    }
  })
  
  return receivers
})

const totalReceivers = computed(() => {
  return selectedReceivers.value.length
})

const currentTime = computed(() => {
  return new Date().toLocaleString()
})

// 方法
const getTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    system: '系统通知',
    work: '工作通知',
    personal: '个人消息',
    announcement: '公告消息'
  }
  return typeMap[type] || type
}

const getTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    system: 'danger',
    work: 'primary',
    personal: 'success',
    announcement: 'warning'
  }
  return typeMap[type] || 'info'
}

const getPriorityLabel = (priority: string) => {
  const priorityMap: Record<string, string> = {
    normal: '普通',
    important: '重要',
    urgent: '紧急'
  }
  return priorityMap[priority] || priority
}

const getPriorityTagType = (priority: string) => {
  const priorityMap: Record<string, string> = {
    normal: 'info',
    important: 'warning',
    urgent: 'danger'
  }
  return priorityMap[priority] || 'info'
}

const applyTemplate = () => {
  if (selectedTemplate.value) {
    const template = templateList.value.find(tpl => tpl.id === selectedTemplate.value)
    if (template) {
      pushForm.content = template.content
      ElMessage.success('模板应用成功')
    }
  }
}

const selectAllUsers = () => {
  selectedUsers.value = filteredUsers.value.map(user => user.id)
}

const clearAllUsers = () => {
  selectedUsers.value = []
}

const handleReceiverTabClick = () => {
  // 切换接收者选择方式
}

const handleDepartmentCheck = (data: any, checked: any) => {
  // 处理部门选择
}

const clearAllReceivers = () => {
  selectedUsers.value = []
  selectedRoles.value = []
}

const removeReceiver = (receiver: any) => {
  if (receiver.type === 'user') {
    const index = selectedUsers.value.indexOf(receiver.id)
    if (index > -1) {
      selectedUsers.value.splice(index, 1)
    }
  } else if (receiver.type === 'role') {
    const index = selectedRoles.value.indexOf(receiver.id)
    if (index > -1) {
      selectedRoles.value.splice(index, 1)
    }
  }
}

const handleFileChange = (file: any) => {
  pushForm.attachments.push(file)
}

const handleFileRemove = (file: any) => {
  const index = pushForm.attachments.findIndex(f => f.uid === file.uid)
  if (index > -1) {
    pushForm.attachments.splice(index, 1)
  }
}

const getPreviewContent = () => {
  if (!pushForm.content) return '消息内容预览'
  
  return pushForm.content
    .replace(/{{userName}}/g, '张三')
    .replace(/{{date}}/g, '2024-12-01')
    .replace(/{{time}}/g, '14:30:00')
    .replace(/{{company}}/g, 'RBAC科技有限公司')
    .replace(/{{department}}/g, '技术部')
    .replace(/{{meetingTopic}}/g, '项目进度讨论')
}

const refreshPreview = () => {
  ElMessage.success('预览已刷新')
}

const sendMessage = async () => {
  if (!pushFormRef.value) return
  
  await pushFormRef.value.validate((valid) => {
    if (valid) {
      if (selectedReceivers.value.length === 0) {
        ElMessage.warning('请选择接收者')
        return
      }
      
      sending.value = true
      
      // 模拟发送
      setTimeout(() => {
        sending.value = false
        
        // 添加到历史记录
        const newPush = {
          id: `PUSH${Date.now()}`,
          title: pushForm.title,
          type: pushForm.type,
          receivers: selectedReceivers.value.map(r => r.id),
          status: 'success',
          sendTime: new Date().toLocaleString()
        }
        pushHistory.value.unshift(newPush)
        
        // 更新统计
        pushStats.total++
        pushStats.success++
        pushStats.today++
        
        ElMessage.success('消息发送成功')
        resetForm()
      }, 2000)
    }
  })
}

const resetForm = () => {
  Object.assign(pushForm, {
    title: '',
    type: '',
    content: '',
    priority: 'normal',
    urgent: false,
    requireRead: false,
    schedule: false,
    scheduleTime: null,
    attachments: []
  })
  selectedUsers.value = []
  selectedRoles.value = []
  selectedTemplate.value = ''
  userSearchKeyword.value = ''
}

const resendMessage = (message: any) => {
  ElMessageBox.confirm('确定要重新发送这条消息吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('消息重新发送成功')
  })
}

const refreshHistory = () => {
  ElMessage.success('历史记录已刷新')
}

// 生命周期
onMounted(() => {
  // 初始化统计数据
  pushStats.total = pushHistory.value.length
  pushStats.success = pushHistory.value.filter(p => p.status === 'success').length
  pushStats.failed = pushHistory.value.filter(p => p.status === 'failed').length
  pushStats.today = pushHistory.value.filter(p => {
    const today = new Date().toDateString()
    const pushDate = new Date(p.sendTime).toDateString()
    return today === pushDate
  }).length
})
</script>

<style scoped lang="less">
.push-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .header-content {
    .page-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 8px 0;
      font-size: 24px;
      font-weight: 600;
      color: #303133;

      .el-icon {
        font-size: 28px;
        color: #409eff;
      }
    }

    .page-subtitle {
      margin: 0;
      color: #909399;
      font-size: 14px;
    }
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }
}

.stats-row {
  margin-bottom: 20px;

  .stat-card {
    .stat-content {
      display: flex;
      align-items: center;
      gap: 15px;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-info {
        .stat-value {
          font-size: 24px;
          font-weight: 600;
          color: #303133;
          line-height: 1;
        }

        .stat-label {
          font-size: 14px;
          color: #909399;
          margin-top: 4px;
        }
      }
    }

    &.total-card .stat-icon {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    &.success-card .stat-icon {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }

    &.failed-card .stat-icon {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    &.today-card .stat-icon {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
  }
}

.push-form-card {
  margin-bottom: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .push-form {
    .receiver-section {
      .receiver-tabs {
        margin-bottom: 20px;
      }

      .user-selection,
      .department-selection,
      .role-selection {
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        padding: 15px;
        max-height: 300px;
        overflow-y: auto;
      }

      .selection-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ebeef5;
      }

      .user-checkbox,
      .role-checkbox {
        display: block;
        margin-bottom: 10px;

        .user-info,
        .role-info {
          display: flex;
          align-items: center;
          gap: 8px;

          .user-name,
          .role-name {
            font-weight: 500;
            color: #303133;
          }

          .user-dept,
          .role-desc {
            color: #909399;
            font-size: 12px;
          }
        }
      }

      .selected-receivers {
        border: 1px solid #dcdfe6;
        border-radius: 6px;
        padding: 15px;

        .receivers-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          font-weight: 500;
          color: #303133;
        }

        .receivers-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;

          .receiver-tag {
            margin: 0;
          }
        }
      }
    }
  }
}

.preview-card {
  margin-bottom: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .message-preview {
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    padding: 20px;

    .preview-header {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;

      h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
      }

      .preview-meta {
        display: flex;
        align-items: center;
        gap: 10px;

        .preview-time {
          color: #909399;
          font-size: 12px;
        }
      }
    }

    .preview-content {
      margin-bottom: 20px;
      line-height: 1.6;
      color: #606266;
    }

    .preview-attachments,
    .preview-receivers {
      margin-bottom: 15px;

      h4 {
        margin: 0 0 10px 0;
        font-size: 14px;
        font-weight: 600;
        color: #303133;
      }

      ul {
        margin: 0;
        padding-left: 20px;

        li {
          margin-bottom: 5px;
          color: #606266;
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }

      .receivers-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        .receiver-preview-tag {
          margin: 0;
        }

        .more-receivers {
          color: #909399;
          font-size: 12px;
          line-height: 24px;
        }
      }
    }
  }
}

.history-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .push-container {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;

    .header-actions {
      width: 100%;
      justify-content: center;
    }
  }

  .stats-row {
    .el-col {
      margin-bottom: 10px;
    }
  }

  .push-form {
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
